<script setup lang="ts">
  defineOptions({
    name: 'Hover',
    inheritAttrs: false
  })
</script>
<template>
  <div>
    <img class="hover-img" src="@/assets/images/cat.png" />
  </div>
</template>
<style scoped>
  @property --d {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }
  @property --r {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  .hover-img {
    cursor: pointer;
    /* 分割数量 */

    --n: 3;
    --r: 0deg;
    --d: 0%;
    -webkit-mask: linear-gradient(
        var(--r),
        transparent var(--d),
        red 0 calc(100% - var(--d)),
        transparent 0
      ),
      linear-gradient(
        calc(var(--r) + 90deg),
        transparent var(--d),
        red 0 calc(100% - var(--d)),
        transparent 0
      );
    -webkit-mask-size: calc(100% / var(--n)) calc(100% / var(--n));
    -webkit-mask-composite: source-in;
  }
  .hover-img:hover {
    animation: ani 1s;
  }
  @keyframes ani {
    0% {
      --d: 0%;
    }
    50% {
      --d: 20%;
    }
    100% {
      --d: 0%;
      --r: 90deg;
    }
  }
</style>
